<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple introduction">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="introduction-title">机构概述</span>
            </div>
            <div class="text item">
              <el-col :span="12" class="introduction-left">
                <h5>{{ Organization.organName }}</h5>
                <p>地址：{{ Organization.organAddress }}</p>
                <p>
                  负责人：{{ Organization.principal }} {{ Organization.phone }}
                </p>
                <el-button
                  class="introduction-left-btn"
                >查看营养部分布</el-button>
              </el-col>
              <el-col :span="12">
                <div class="sorting-center">
                  <el-col :span="12">
                    <p>分拣中心(个)</p>
                    <h2>{{ Organization.sortingCenterNumber }}</h2>
                  </el-col>
                  <el-col :span="12">
                    <p>营业部(个)</p>
                    <h2>{{ Organization.agencyNumber }}</h2>
                  </el-col>
                </div>
                <div class="sorting-center">
                  <el-col :span="12">
                    <p>司机人数(个)</p>
                    <h2>{{ Organization.driverNumber }}</h2>
                  </el-col>
                  <el-col :span="12">
                    <p>快递员人数(个)</p>
                    <h2>{{ Organization.courierNumber }}</h2>
                  </el-col>
                </div>
              </el-col>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="today-data">今日数据</span>
              <span
                style="float: right; padding: 3px 0; color: #818693"
                type="text"
              ><i
                style="color: #e15536; font-size: 16px; font-weight: bold"
                class="el-icon-refresh"
              />2023-09-10 19:55</span>
            </div>
            <div class="data">
              <div class="dataList">
                <span style="margin-bottom: 21px">订单金额(元)</span>
                <div
                  style="
                    margin: 22px 0 22px 0;
                    font-size: 36px;
                    font-weight: 700;
                  "
                >
                  {{ todayData.orderAmount }}
                </div>
                <div
                  style="color: #818693; font-size: 14px; margin-bottom: 20px"
                >
                  较昨日+ {{ todayData.orderAmountChanges }}
                </div>
              </div>
              <div class="dataList">
                <span style="margin-bottom: 21px">订单数量(笔)</span>
                <div
                  style="
                    margin: 22px 0 22px 0;
                    font-size: 36px;
                    font-weight: 700;
                  "
                >
                  {{ todayData.orderNumber }}
                </div>
                <div
                  style="color: #818693; font-size: 14px; margin-bottom: 20px"
                >
                  较昨日+ {{ todayData.orderNumberChanges }}
                </div>
              </div>
              <div class="dataList">
                <span>运输任务(次)</span>
                <div
                  style="
                    margin: 22px 0 22px 0;
                    font-size: 36px;
                    font-weight: 700;
                  "
                >
                  {{ todayData.transportTaskNumber }}
                </div>
                <div
                  style="color: #818693; font-size: 14px; margin-bottom: 20px"
                >
                  较昨日+ {{ todayData.transportTaskNumberChanges }}
                </div>
              </div>
            </div>
            <div class="text item" />
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple">待办任务</div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light">执行中任务</div></el-col>
    </el-row>
    <el-row>
      <el-col
        :span="24"
      ><div class="grid-content bg-purple">
        <span class="today-data">常用功能</span>
        <div id="box">
          <div style=" padding-top: 35px; text-align: center; width:206px;height:130px;background-color: #fafafb;">
            <span><i style="font-size: 40px;" class="el-icon-takeaway-box" /></span>
            <br>
            <div style="margin-top: 20px; font-weight: 700;  font-size: 16px;  color: #20232a font-weight: 700;  font-size: 16px;  color: #20232a"><span>快递作业</span></div>
          </div>
          <div style=" padding-top: 35px; text-align: center; width:206px;height:130px;background-color: #fafafb;">
            <span><i style="font-size: 40px;" class="el-icon-guide" /></span>
            <br>
            <div style="margin-top: 20px; font-weight: 700;  font-size: 16px;  color: #20232a"><span>运输任务</span></div>
          </div>
          <div style=" padding-top: 35px; text-align: center; width:206px;height:130px;background-color: #fafafb;">
            <span><i style="font-size: 40px;" class="el-icon-position" /></span>
            <br>
            <div style="margin-top: 20px; font-weight: 700;  font-size: 16px;  color: #20232a"><span>线路管理</span></div>
          </div>
          <div style=" padding-top: 35px; text-align: center; width:206px;height:130px;background-color: #fafafb;" @click="$router.push('/transit/vehicle')">
            <span><i style="font-size: 40px;" class="el-icon-truck" /></span>
            <br>
            <div style="margin-top: 20px; font-weight: 700;  font-size: 16px;  color: #20232a"><span>车辆管理</span></div>
          </div>
          <div style=" padding-top: 35px; text-align: center; width:206px;height:130px;background-color: #fafafb;" @click="$router.push('/transit2/driver')">
            <span><i style="font-size: 40px;" class="el-icon-user" /></span>
            <br>
            <div style="margin-top: 20px; font-weight: 700;  font-size: 16px;  color: #20232a"><span>司机管理</span></div>
          </div>
          <div style=" padding-top: 35px; text-align: center; width:206px;height:130px;background-color: #fafafb;">
            <span><i style="font-size: 40px;" class="el-icon-money" /></span>
            <br>
            <div style="margin-top: 20px; font-weight: 700;  font-size: 16px;  color: #20232a"><span>运费查询</span></div>
          </div>
        </div>
      </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col
        :span="12"
      ><div class="grid-content bg-purple">线路管理</div></el-col>
      <el-col
        :span="12"
      ><div class="grid-content bg-purple-light">运输任务</div></el-col>
    </el-row>
    <el-row>
      <el-col
        :span="12"
      ><div ref="totalCount" class="grid-content bg-purple">
        订单总量
        <div /></div></el-col>
      <el-col
        :span="12"
      ><div class="grid-content bg-purple-light">订单分布</div></el-col>
    </el-row>
  </div>
</template>

<script>
import { getWorkbenchData } from '@/api/work'
export default {
  name: 'Dashboard',
  data() {
    return {
      workList: [],
      Organization: [], // ? 机构概述
      todayData: [] // ? 今日数据
      // 待办任务
    }
  },
  created() {
    this.getWorkbenchData()
  },
  methods: {
    async getWorkbenchData() {
      const res = await getWorkbenchData()
      console.log(res)
      // ! 机构概述
      this.Organization = res.data.organOverview
      this.todayData = res.data.todayData
    }
  }
  // echarts图表
}
</script>

<style>
.introduction-title {
  font-size: 20px;
  font-weight: bold;
}
.introduction-left {
  border-right: 1px solid #ccc;
  margin-bottom: 30px;
  padding-left: 15px;
}
.introduction-left h5 {
  margin: 0;
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 400;
}
.introduction-left p {
  color: #8c8b94;
  font-size: 14px;
}
.introduction-left-btn {
  background-color: #ffeeeb;
  border: 1px solid #e15536;
  color: #e15536;
}
.el-row {
  margin: 0 30px 30px;
}

.bg-purple {
  background: #fff;
}
.bg-purple-light {
  /* background: #e5e9f2; */
  background: #fff;
  margin-left: 20px;
}
.grid-content {
  border-radius: 4px;
  min-height: 200px;
  /* margin-left: 30px; */
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
#box{
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.data {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.dataList {
  width: 173px;
  height: 139px;
}

.today-data {
  font-size: 20px;
  font-weight: bold;
}

.sorting-center {
  margin-left: 30px;
}
.sorting-center p {
  margin: 12px 0;
}
.sorting-center h2 {
  margin: 0;
  color: #e15536;
}
.el-card__header {
  border-bottom: none !important;
}
  .el-row {
    margin:0 30px 30px;
  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    /* background: #e5e9f2; */
    background: #fff;
    margin-left:  20px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 100px;
    /* margin-left: 30px; */
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
